<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表的过滤</title>
</head>
<body>
<div id="app">
    <input type="text" placeholder="请输入过滤的插件" v-model="keyword">
<ul>
    <li v-for="(person,index) in newPersons" :key="person.id">
        {{person.id}}----{{ person.name }}----{{person.age}}
    </li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.config.productionTip=false;//设置为 false 以阻止 vue 在启动时生成生产提示。
    const vm=new Vue({
        el:"#app",
        data(){
            return {
                keyword:"",
                persons:[
                    {id:1,name:'zhaoliying',age:33},
                    {id:2,name:'yangmi',age:34},
                    {id:3,name:'qiwei',age:33},
                    {id:4,name:'dilireba',age:20}
                ]
            }
        },
        computed:{
            newPersons(){
                //从vm身上获取keyword和persons
                let {keyword,persons}=this;
                console.log(this);
                //根据获取的这两个数据计算新的数据
                //函数和方法的三要素
                //功能
                //参数
                //返回值

                //不是箭头函数
                // let  arr=persons.filter(function (item,index){
                //     return item.name.indexOf(keyword)!==-1;
                // });
                //箭头函数
                let arr=persons.filter(item=>item.name.indexOf(keyword)!==-1);
                return arr;
            }
        }
    });
</script>
</body>
</html>